<template>
  <el-form>
    <el-upload
      class="avatar-uploader"
      :limit="1"
      ref="upload"
      :on-remove="imageListRemove"
      :on-change="handleChange"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传固定的xls/xlsx文件。</div>
    </el-upload>
    <el-form-item align="right">
      <el-button size="small" type="primary" @click="onCancel" style="margin-top: 20px;">取消</el-button>
      <el-button size="small" type="primary" @click="onSubmit" style="margin-top: 20px;">确认</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'index',
    props: {
      src: { type: String, default: '' },
      default: { type: Boolean, default: false }
    },
    data() {
      return {
        imageUrl: '',
        fileList: [],
        dataList: [],
        jewelryList: [],
        form: {
          image: ''
        },
      }
    },
    async created() {

    },
    methods: {
      onSubmit() {
        // 输出
        this.$emit('operate', this.dataList)
      },
      onCancel() {
        this.$emit('cancel')
      },
      imageListRemove(file, fileList) {
        this.fileList.splice(0, 1)
        this.dataList = []
      },
      handleExceed(files, fileList){
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      handleChange(file, fileList) {
        this.fileTemp = file.raw
        if (this.fileTemp) {
          if ((this.fileTemp.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
            || (this.fileTemp.type === 'application/vnd.ms-excel')) {
            this.importfxx(this.fileTemp)
          } else {
            this.$message({
              type: 'warning',
              message: '附件格式错误，请删除后重新上传！'
            })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请上传附件！'
          })
        }
      },
      importfxx(obj) {
        let _this = this
        let inputDOM = this.$refs.inputer
        // 通过DOM取文件数据
        this.file = event.currentTarget.files[0]
        var rABS = false // 是否将文件读取为二进制字符串
        var f = this.file
        var reader = new FileReader()
        // if (!FileReader.prototype.readAsBinaryString) {
        FileReader.prototype.readAsBinaryString = function(f) {
          var binary = ''
          var rABS = false // 是否将文件读取为二进制字符串
          var pt = this
          var wb // 读取完成的数据
          var outdata;
          var reader = new FileReader()

          reader.onload = function(e) {
            var bytes = new Uint8Array(reader.result)
            var length = bytes.byteLength
            for (var i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i])
            }
            var XLSX = require('xlsx')
            if(rABS) {
              wb = XLSX.read(btoa(fixdata(binary)), { // 手动转化
                type: 'base64'
              })
            } else {
              wb = XLSX.read(binary, {
                type: 'binary'
              })
            }
            // outdata就是你想要的东西
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
            this.da = [...outdata]
            if (_this.default) {
              _this.dataList = outdata
            } else {
              _this.importForm(outdata)
            }
          }
          reader.readAsArrayBuffer(f)
        }
        if (rABS) {
          reader.readAsArrayBuffer(f)
        } else {
          reader.readAsBinaryString(f)
        }
      },
      importForm(outdata) {
        this.dataList = []
        outdata.forEach((value, index, arr) => {
          var order = {}
          order.upOrderId = value['订单号']
          this.dataList.push(order)
        })
      },
      async translateDicts(type, value) {
        var data = ''
        var dataList = this.jewelryList[type]
        dataList.forEach(item => {
          if (item.value === value) {
            data = item.id
          }
        })
        return data
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .box-card {
    width: 480px;
  }
</style>
